<template>
	<div>
		<zh-form ref="roleQueryForm" :model="queryRoleParam">
			<zh-form-input :span="12" prop="roleName" label="" placeholder="请输入角色名称" v-model="queryRoleParam.roleName"></zh-form-input>
			<zh-form-query :form-ref="roleQueryForm" :table-ref="roleListTable" :show-advanced="false"></zh-form-query>
		</zh-form>
		<zh-row :gutter="8">
			<zh-col :span="12">
				<zh-table
					ref="roleListTable"
					:title="state.leftTitle"
					:rowConfig="{ keyField: 'roleId' }"
					:height="610"
					funcCode="role0001"
					:columns="state.roleColumn"
					:disabledList="state.myCheckList"
				>
					<template #header>
						<div class="card-header">
							<span>{{ state.leftTitle }}</span>
							<el-button v-if="props.mode === 'multiple'" type="primary" plain @click="addAll">添加当前数据</el-button>
						</div>
					</template>
					<template #fixedRow_default="{ row }">
						<zh-badge :status="flagMap[row.fixed].status" :text="flagMap[row.fixed].text" />
					</template>
					<template #operateRole="{ row }">
						<zh-button :key="row.disabled" :type="row.disabled ? 'info' : 'primary'" @click="add(row)" :disabled="row.disabled">{{
							row.disabled ? '已选择' : '添加'
						}}</zh-button>
					</template>
					<template #roleNameDefault="{ row }">
						<span v-if="queryRoleParam.roleName && row.roleName.indexOf(queryRoleParam.roleName) > -1">
							{{ row.roleName.substr(0, row.roleName.indexOf(queryRoleParam.roleName)) }}
							<span class="search-text-color">{{ queryRoleParam.roleName }}</span>
							{{ row.roleName.substr(row.roleName.indexOf(queryRoleParam.roleName) + queryRoleParam.roleName.length) }}
						</span>
						<span v-else>
							{{ row.roleName }}
						</span>
					</template>
				</zh-table>
			</zh-col>
			<zh-col :span="12">
				<zh-table
					ref="roleCheckTable"
					type="default"
					:rowConfig="{ keyField: 'roleId' }"
					:height="610"
					:title="state.rightTitle"
					:data="state.myCheckList"
					:columns="state.checkroleColumn"
				>
					<template #header>
						<div class="card-header">
							<span>{{ state.rightTitle }}</span>
							<el-button v-if="props.mode === 'multiple'" type="danger" plain @click="delAll">全部移除</el-button>
						</div>
					</template>
					<template #operate="{ row }">
						<zh-button type="danger" @click="del(row)">移除</zh-button>
					</template>
					<template #fixed_default="{ row }">
						<zh-select v-model="row.fixed" :options="state.fixedDict" :disabled="row.editDisabled"></zh-select>
					</template>
					<template #roleNameCheckDefault="{ row }">
						<span v-if="queryRoleParam.roleName && row.roleName.indexOf(queryRoleParam.roleName) > -1">
							{{ row.roleName.substr(0, row.roleName.indexOf(queryRoleParam.roleName)) }}
							<span class="search-text-color">{{ queryRoleParam.roleName }}</span>
							{{ row.roleName.substr(row.roleName.indexOf(queryRoleParam.roleName) + queryRoleParam.roleName.length) }}
						</span>
						<span v-else>
							{{ row.roleName }}
						</span>
					</template>
				</zh-table>
			</zh-col>
		</zh-row>
	</div>
</template>
<script lang="ts" setup name="roleUserSelect">
import { ElMessage } from 'element-plus';
// ------------------接收传入参数(组件)-------------------
const props = defineProps({
	userId: {
		type: String,
		default() {
			return '';
		},
	},
	modelValue: Boolean,
	//模式：multiple 多选
	mode: {
		type: String,
		default() {
			return 'multiple';
		},
	},
});
// ------------------钩子函数----------------------------
// 初始化
onMounted(() => {
	nextTick(() => {
		roleListTable.value.query();
		getCheckList();
	});
});
// ------------------定义子组件--------------------------
const roleQueryForm = ref<any>({});
const roleListTable = ref<any>({});
const roleCheckTable = ref<any>({});
// ------------------变量区------------------------------
const flagMap = {
	0: {
		status: 'error',
		text: '否',
	},
	1: {
		status: 'processing',
		text: '是',
	},
};
const queryRoleParam = ref({ roleName: '' });
const state = reactive({
	leftTitle: '待选择列表',
	rightTitle: '已选择0条',
	myCheckList: [] as any,
	fixedDict: [
		{ dictKey: '0', dictValue: '否' },
		{ dictKey: '1', dictValue: '是' },
	],
	roleColumn: [
		{
			field: 'operateRole',
			title: '操作',
			fixed: 'left',
			align: 'center',
			width: 100,
			slots: {
				// 使用插槽模板渲染
				default: 'operateRole',
			},
		},
		{ field: 'roleId', title: '角色id', visible: false, fixed: 'left', align: 'center', width: 150 },
		{
			field: 'roleName',
			title: '角色名称',
			align: 'center',
			fixed: 'left',
			minWidth: 200,
			slots: {
				// 使用插槽模板渲染
				default: 'roleNameDefault',
			},
		},
		{
			field: 'fixed',
			title: '是否可操作',
			align: 'center',
			minWidth: 200,
			slots: {
				// 使用插槽模板渲染
				default: 'fixedRow_default',
			},
		},
	],
	checkroleColumn: [
		{
			field: 'operate',
			title: '操作',
			fixed: 'left',
			align: 'center',
			width: 100,
			slots: {
				// 使用插槽模板渲染
				default: 'operate',
			},
		},
		{ field: 'roleId', title: '角色id', visible: false, fixed: 'left', align: 'center', width: 150 },
		{
			field: 'roleName',
			title: '角色名称',
			align: 'center',
			fixed: 'left',
			minWidth: 200,
			slots: {
				// 使用插槽模板渲染
				default: 'roleNameCheckDefault',
			},
		},
		{
			field: 'fixed',
			title: '是否可操作',
			align: 'center',
			minWidth: 200,
			slots: {
				// 使用插槽模板渲染
				default: 'fixed_default',
			},
		},
	],
});
// ------------------方法区------------------------------

const emit = defineEmits(['update:modelValue']);
const getCheckList = () => {
	let params = { pageSize: 100, pageNum: 1, searchType: '2', userId: props.userId };
	$api.common.send.post('user0034', params).then((res) => {
		state.myCheckList = res.result.list||[];
		state.rightTitle = '已选择' + state.myCheckList.length + '条';
	});
};
const add = (row: any) => {
	let list = state.myCheckList;
	if (list && list.length > 0) {
		if (props.mode === 'multiple') {
			let hasList = list.filter((item: any) => item.roleId === row.roleId);
			if (hasList && hasList.length > 0) {
				ElMessage.warning('该角色已选择');
			} else {
				list.push(row);
			}
		} else {
			ElMessage.warning('只可选择一条');
		}
	} else {
		list.push(row);
	}
	state.rightTitle = '已选择' + list.length + '条';
	state.myCheckList = list;
};
const del = (row) => {
	let list = state.myCheckList;
	if (list && list.length > 0) {
		let hasList = list.filter((item: any) => item.roleId !== row.roleId);
		state.rightTitle = '已选择' + hasList.length + '条';
		state.myCheckList = hasList;
	}
};
const addAll = () => {
	let addlist = roleListTable.value.tableData;
	if (addlist && addlist.length > 0) {
		let list = state.myCheckList || [];
		addlist.forEach((item) => {
			if (!item.disabled) {
				let hasList = list.filter((checkItem: any) => checkItem.roleId === item.roleId);
				if (!hasList || hasList.length <= 0) {
					list.push(item);
				}
			}
		});
		state.myCheckList = list;
	} else {
		ElMessage.warning('没有可添加的数据');
	}
};
const delAll = () => {
	state.myCheckList = [];
};
const save = () => {
	let params = { userId: props.userId, roleFixedVOList: state.myCheckList };
	$api.common.send.post('user0019', params).then(() => {
		emit('update:modelValue', false);
		ElMessage.success('保存成功');
	});
};
defineExpose({
	save,
});
</script>
<style lang="scss" scoped>
.search-text-color {
	color: var(--el-color-primary);
}
.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
</style>
